<template>
	<view>
		<view class="cart-list">
			<view class="edit">
				<text @click="status=!status">{{status===true?'完成':'编辑'}}</text>
			</view>
			<block v-for="(item, index) in goodList" :key="item.id">
				<view class="cart-item">
					<!-- <checkbox :checked='item.checked' color='#FF3333' @click="check('item', index)" /> -->
					<u-checkbox v-model="item.checked" shape="circle" active-color="#FC4759" :name="item.id" @change="check(item,index)"></u-checkbox>
					<view class="image-wrapper" @click="carlist(item)">
						<image :src="item.goods_image" mode="aspectFill"></image>
					</view>
					<view class="item-right">
						<text class="title">{{item.goods_name}}</text>
						<text class="attr">{{item.goods_spec}}:<text class="size">{{item.size}}</text></text>
						<text class="instock">{{item.instock}}</text>
						<view class="item-last">
							<text class="discount-price"><text class="ico">￥</text>{{item.goods_discount}}</text>
							<uni-number-box :min="1" :max="100" :value="item.number" :isMin="item.number===1" :index="index" @eventChange="numberChange"
							 :data-index='item.index'></uni-number-box>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 底部菜单栏 -->
		<view class="action-section">
			<u-checkbox class="checkbox" v-model="checked" active-color="#FC4759" shape="circle" @change="checkedAll">全选</u-checkbox>
			<view class="total-box">
				<text class="price-title" v-show="!status">合计：</text>
				<view class="" v-show="!status">
					<view class="price-number">{{totalPrice}}元</view>
					<view class="discount">优惠总价格:￥{{discount}}</view>
				</view>
			</view>
			<view class="confirm-btn" v-show="!status" @click="createOrder()">结算</view>
			<view class="confirm-btn" v-show="status" @click="deleteCartGoods()">删除</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/cart/uni-number-box.vue'
	export default {
		name: 'cart-item',
		components: {
			uniNumberBox
		},
		props: {
			cartList: {
				type: Array,
				default: function() {
					return []
				}
			},
		},
		data() {
			return {
				status: false,
				totalPrice: 0, //总价
				discount: 15, //优惠
				checked: false, //全选 单选
				goodList: this.cartList //商品数据

			}
		},
		methods: {
			//编辑
			Edit() {
				this.flag = !this.flag;
			},
			//删除
			deleteCartGoods: function(e) {
				var list = this.cartList;
				var index = -1; //要开始删除的位置
				var delnum = 0; //要删除的数量

				for (var i = 0; i < list.length; i++) {
					//如果当前商品已选中
					if (list[i].checked) {
						if (index == -1) {
							index = i; //得到要开始删除的位置（第一个勾选的商品的位置）
						}
						delnum++;
					}
				}
				list.splice(index, delnum); //删除
				this.setData({
					cartList: list
				})
				this.getsumTotal();
				wx.setStorageSync("cartList", list) //存缓存
			},
			// 全选
			checkedAll(e) {
				this.goodList.map(val => {
					val.checked = e.value;
				})
				this.updateTotalPrice();
			},
			//数量
			numberChange(data) {
				this.goodList[data.index].number = data.number;
				this.updateTotalPrice();
			},
			//计算总价
			updateTotalPrice() {
				let list = this.goodList;
				if (list.length === 0) {
					return;
				}
				let totalPrice = 0;
				list.forEach(item => {
					if (item.checked === true) {
						totalPrice += item.goods_discount * item.number;
					}
				})
				this.totalPrice = Number(totalPrice.toFixed(2));
			},
			//选中状态处理
			check(type, index) {
				let i = 0;
				if (type === 'item') {
					this.goodList[index].checked = !this.goodList[index].checked
				}
				this.goodList.map(val => {
					if (val.checked === true) {
						i++;
					}
				})
				if (this.goodList.length != i) {
					this.checked = false;
				} else {
					this.checked = true;
				}
				this.updateTotalPrice();
			},
			createOrder() {
				this.$msg('生成订单中');
				let orderdata = [];
				let orderjson = {};
				this.goodList.map((item) => {
					orderjson = {
						state: 1,
						image: item.goods_image,
						title: item.goods_name,
						spec: item.goods_spec,
						size: item.size,
						amount: item.number,
						money: item.goods_discount,
					}
					orderdata.push(orderjson)
				})
				uni.navigateTo({
					url:'/pages/order/affirm'
				})
				// console.log(orderdata)
			},
			carlist(item) {
				// this.$jump('/pages/goods/detail/detail');
				uni.navigateTo({
					url: '/pages/goods/detail/detail'
				})
				console.log(item)
			}
		},
		mounted() {
			this.updateTotalPrice();
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.cart-list {
		padding: 0 16rpx;

		.edit {
			padding: 16rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			text {

				float: right;
				display: block;
				padding: 14rpx 36rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 26rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(41, 41, 41, 1);
			}
		}
	}

	/* 购物车列表项 */
	.cart-item {
		display: flex;
		position: relative;
		align-content: center;
		align-items: center;
		padding: 25rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;


		.cart-check {
			width: 30rpx;
			height: 30rpx;
		}

		.image-wrapper {
			width: 172rpx;
			height: 172rpx;
			flex-shrink: 0;
			position: relative;

			image {
				width: 172rpx;
				height: 172rpx;
				border-radius: 8rpx;
			}
		}

		.item-right {
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position: relative;
			padding-left: 25rpx;

			.title {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(41, 41, 41, 1);
				line-height: 36rpx;
			}

			.attr {
				margin-top: 16rpx;
				width: 100rpx;
				padding: 8rpx 15rpx;
				background-color: #F7F7F7;
				border-radius: 12rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(163, 163, 163, 1);

				.size {
					margin-left: 7rpx;
				}
			}

			.instock {
				margin-top: 5rpx;
				display: block;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(242, 73, 81, 1);
			}

			.item-last {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.discount-price {
					font-size: 32rpx;
					font-family: PingFang SC;
					color: #F0353E;
					margin-top: 7rpx;

					.ico {
						font-size: 20rpx;
					}
				}

				.goods-price {
					margin: 15rpx;
					flex-grow: 1;
					font-size: 24rpx;
					color: gray;
					text-decoration: line-through;
				}
			}
		}
	}

	/* 底部栏 */
	.action-section {
		/* #ifdef H5 */
		margin-bottom: 100rpx;
		/* #endif */
		position: fixed;
		bottom: 0;
		z-index: 95;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 14rpx 20rpx;
		background: #FFFFFF;

		.checkbox {
			margin-left: 20rpx;
		}

		.total-box {
			display: flex;
			margin-left: 50rpx;

			.price-title {
				font-size: 32rpx;
				color: black;
				margin: auto;
			}

			.price-number {			
				font-size:32rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(242,39,49,1);
			}
			.discount{
				line-height: 40rpx;
				font-size:20rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(128,128,128,1);
			}
		}

		.confirm-btn {
			padding: 22rpx 59rpx;
			text-align: center;
			background: linear-gradient(-90deg, rgba(247, 54, 87, 1) 0%, rgba(247, 89, 115, 1) 100%);
			border-radius: 45rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);

		}
	}
</style>
